/* 等级系统样式 */

/* 用户等级标签 */
.user-level {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 8rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

/* 等级0 - 时界星穹の鼠王 (消费金额满0) - 绿色系 */
.level-0 {
  background: #28a745;
  color: white;
  border: 2rpx solid #20c997;
}

/* 等级1 - 苍穹霜冕の白银之翼 (消费金额满88) - 黄色系 */
.level-1 {
  background: #ffc107;
  color: white;
  border: 2rpx solid #e0a800;
}

/* 等级2 - 夜魇终焉の漆黑之翼 (消费金额满888) - 青色系 */
.level-2 {
  background: #17a2b8;
  color: white;
  border: 2rpx solid #138496;
}

/* 等级3 - 寂灭黑皇の琳达黑暗化身 (消费金额满5888) - 红色系 */
.level-3 {
  background: linear-gradient(135deg, #17a2b8 0%, #dc3545 20%, #fd7e14 40%, #dc3545 60%, #c82333 80%, #bd2130 100%);
  background-size: 200% 200%;
  color: white;
  border: 2rpx solid #dc3545;
  animation: level3Shimmer 12s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4rpx 15rpx rgba(220, 53, 69, 0.4);
}

.level-3::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  animation: shimmer 4s linear infinite;
}

/* 等级4 - 时序圣冠の琳达 (消费金额满11888) - 紫色系 */
.level-4 {
  background: linear-gradient(135deg, #dc3545 0%, #e83e8c 20%, #d63384 40%, #6f42c1 60%, #8e44ad 80%, #9b59b6 100%);
  background-size: 200% 200%;
  color: white;
  border: 2rpx solid #6f42c1;
  animation: level4Shimmer 14s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6rpx 20rpx rgba(111, 66, 193, 0.5);
}

.level-4::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  animation: shimmer 3.6s linear infinite;
}

/* 等级5 - 星糖冕冠の多拉姆糖 (消费金额满38888) - 紫金系 */
.level-5 {
  background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 20%, #ffd700 40%, #ffc107 60%, #9b59b6 80%, #e74c3c 100%);
  background-size: 200% 200%;
  color: white;
  border: 2rpx solid #ffd700;
  animation: level5Shimmer 16s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8rpx 25rpx rgba(255, 215, 0, 0.6);
}

.level-5::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
  animation: shimmer 2.4s linear infinite;
}

/* 等级6 - 时界星穹主の阿尔杰斯 (消费金额满88888) - 黑紫金系 */
.level-6 {
  background: linear-gradient(135deg, #000000 0%, #1a1a2e 15%, #16213e 30%, #6f42c1 45%, #8e44ad 60%, #ffd700 75%, #ffc107 90%, #000000 100%);
  background-size: 200% 200%;
  color: #ffffff;
  border: 4rpx solid #ffd700;
  animation: level6Shimmer 20s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 15rpx 40rpx rgba(255, 215, 0, 0.9),
    0 0 50rpx rgba(111, 66, 193, 0.6),
    inset 0 0 20rpx rgba(255, 215, 0, 0.2);
  text-shadow: 
    0 0 15rpx rgba(255, 215, 0, 1),
    0 0 25rpx rgba(255, 215, 0, 0.8),
    0 0 35rpx rgba(255, 215, 0, 0.6),
    0 0 45rpx rgba(111, 66, 193, 0.8),
    3rpx 3rpx 6rpx rgba(0, 0, 0, 1),
    -1rpx -1rpx 2rpx rgba(255, 255, 255, 0.3);
  font-weight: bold;
  font-size: 28rpx;
}

.level-6::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,215,0,0.8) 50%, transparent 70%);
  animation: shimmer 1.6s linear infinite;
}

.level-6::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,215,0,0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(111,66,193,0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,215,0,0.2) 0%, transparent 70%);
  animation: level6Glow 6s ease-in-out infinite;
}

/* 等级7 - 拍卖师 (消费金额满188888) - 彩虹钻石系 */
.level-7 {
  background: linear-gradient(135deg, 
    #ff0000 0%, #ff8000 8%, #ffff00 16%, #80ff00 24%, 
    #00ff00 32%, #00ff80 40%, #00ffff 48%, #0080ff 56%, 
    #0000ff 64%, #8000ff 72%, #ff00ff 80%, #ff0080 88%, 
    #ff0000 100%);
  background-size: 200% 200%;
  color: #ffffff;
  // border: 4rpx solid #ff0000;
  animation: level7Shimmer 10s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  // box-shadow: 
  //   0 15rpx 40rpx rgba(255, 0, 0, 0.9),
  //   0 0 50rpx rgba(255, 128, 0, 0.6),
  //   0 0 100rpx rgba(255, 255, 0, 0.4),
  //   inset 0 0 20rpx rgba(255, 255, 255, 0.2);
  text-shadow: 
    0 0 15rpx rgba(255, 255, 255, 1),
    0 0 25rpx rgba(255, 255, 255, 0.8),
    0 0 35rpx rgba(255, 255, 255, 0.6),
    3rpx 3rpx 6rpx rgba(0, 0, 0, 1),
    -1rpx -1rpx 2rpx rgba(255, 255, 255, 0.3);
  font-weight: bold;
  font-size: 28rpx;
}

/* 等级99 - 拍卖师 (管理员专属等级) - 彩虹钻石系 */
.level-99 {
  background: linear-gradient(135deg, 
    #ff0000 0%, #ff8000 8%, #ffff00 16%, #80ff00 24%, 
    #00ff00 32%, #00ff80 40%, #00ffff 48%, #0080ff 56%, 
    #0000ff 64%, #8000ff 72%, #ff00ff 80%, #ff0080 88%, 
    #ff0000 100%);
  background-size: 200% 200%;
  color: #ffffff;
  // border: 4rpx solid #ff0000;
  animation: level7Shimmer 10s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  // box-shadow: 
  //   0 15rpx 40rpx rgba(255, 0, 0, 0.9),
  //   0 0 50rpx rgba(255, 128, 0, 0.6),
  //   0 0 100rpx rgba(255, 255, 0, 0.4),
  //   inset 0 0 20rpx rgba(255, 255, 255, 0.2);
  text-shadow: 
    0 0 15rpx rgba(255, 255, 255, 1),
    0 0 25rpx rgba(255, 255, 255, 0.8),
    0 0 35rpx rgba(255, 255, 255, 0.6),
    3rpx 3rpx 6rpx rgba(0, 0, 0, 1),
    -1rpx -1rpx 2rpx rgba(255, 255, 255, 0.3);
  font-weight: bold;
  font-size: 28rpx;
}

.level-7::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%);
  animation: shimmer 2s linear infinite;
}

.level-7::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255,0,0,0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 0%, transparent 70%);
  animation: level7Glow 6s ease-in-out infinite;
}

.level-99::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%);
  animation: shimmer 2s linear infinite;
}

.level-99::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255,0,0,0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 0%, transparent 70%);
  animation: level7Glow 6s ease-in-out infinite;
}

/* 高级动画效果 */

/* 闪烁效果 */
@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* 等级0 - 基础闪烁 */
@keyframes level0Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* 等级1 - 银光闪烁 */
@keyframes level1Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 25%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 0% 75%;
  }
}

/* 等级2 - 暗影流动 */
@keyframes level2Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  33% {
    background-position: 100% 33%;
  }
  66% {
    background-position: 100% 66%;
  }
}

/* 等级3 - 血焰燃烧 */
@keyframes level3Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  20% {
    background-position: 100% 20%;
  }
  40% {
    background-position: 100% 40%;
  }
  60% {
    background-position: 0% 60%;
  }
  80% {
    background-position: 100% 80%;
  }
}

/* 等级4 - 金光闪耀 */
@keyframes level4Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  16% {
    background-position: 100% 16%;
  }
  32% {
    background-position: 100% 32%;
  }
  48% {
    background-position: 0% 48%;
  }
  64% {
    background-position: 100% 64%;
  }
  80% {
    background-position: 0% 80%;
  }
}

/* 等级5 - 梦幻彩虹 */
@keyframes level5Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  14% {
    background-position: 100% 14%;
  }
  28% {
    background-position: 100% 28%;
  }
  42% {
    background-position: 0% 42%;
  }
  56% {
    background-position: 100% 56%;
  }
  70% {
    background-position: 0% 70%;
  }
  84% {
    background-position: 100% 84%;
  }
}

/* 等级6 - 时界之主 */
@keyframes level6Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  12% {
    background-position: 100% 12%;
  }
  24% {
    background-position: 100% 24%;
  }
  36% {
    background-position: 0% 36%;
  }
  48% {
    background-position: 100% 48%;
  }
  60% {
    background-position: 0% 60%;
  }
  72% {
    background-position: 100% 72%;
  }
  84% {
    background-position: 0% 84%;
  }
  96% {
    background-position: 100% 96%;
  }
}

/* 等级6特殊发光效果 */
@keyframes level6Glow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* 等级7 - 拍卖师特效动画 */

/* 彩虹流动效果 */
@keyframes level7Shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  12% {
    background-position: 100% 12%;
  }
  24% {
    background-position: 100% 24%;
  }
  36% {
    background-position: 0% 36%;
  }
  48% {
    background-position: 100% 48%;
  }
  60% {
    background-position: 0% 60%;
  }
  72% {
    background-position: 100% 72%;
  }
  84% {
    background-position: 0% 84%;
  }
  96% {
    background-position: 100% 96%;
  }
}

/* 发光效果 */
@keyframes level7Glow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* 等级7进度条动画 */
@keyframes level7ProgressShimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* 悬停效果增强 */
.user-level:hover {
  transform: translateY(-2rpx) scale(1.02);
  box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.3);
}

.level-0:hover {
  box-shadow: 0 4rpx 12rpx rgba(40,167,69,0.4);
}

.level-1:hover {
  box-shadow: 0 4rpx 12rpx rgba(255,193,7,0.5);
}

.level-2:hover {
  box-shadow: 0 4rpx 12rpx rgba(23,162,184,0.5);
}

.level-3:hover {
  box-shadow: 0 8rpx 25rpx rgba(220,53,69,0.6);
}

.level-4:hover {
  box-shadow: 0 8rpx 25rpx rgba(111,66,193,0.7);
}

.level-5:hover {
  box-shadow: 0 8rpx 25rpx rgba(255,215,0,0.8);
}

.level-6:hover {
  box-shadow: 
    0 20rpx 50rpx rgba(255,215,0,1),
    0 0 80rpx rgba(255,215,0,0.8),
    0 0 120rpx rgba(255,215,0,0.6),
    0 0 160rpx rgba(111,66,193,0.4),
    inset 0 0 40rpx rgba(255,215,0,0.4);
  transform: translateY(-6rpx) scale(1.1);
  text-shadow: 
    0 0 25rpx rgba(255, 215, 0, 1),
    0 0 35rpx rgba(255, 215, 0, 0.9),
    0 0 45rpx rgba(255, 215, 0, 0.8),
    0 0 55rpx rgba(111, 66, 193, 1),
    5rpx 5rpx 10rpx rgba(0, 0, 0, 1),
    -2rpx -2rpx 4rpx rgba(255, 255, 255, 0.6);
  animation: level6Shimmer 4s ease-in-out infinite;
}

.level-7:hover {
  box-shadow: 
    0 20rpx 50rpx rgba(255, 0, 0, 1),
    0 0 80rpx rgba(255, 128, 0, 0.8),
    0 0 120rpx rgba(255, 255, 0, 0.6),
    0 0 160rpx rgba(0, 255, 0, 0.4),
    inset 0 0 40rpx rgba(255, 255, 255, 0.4);
  transform: translateY(-6rpx) scale(1.1);
  text-shadow: 
    0 0 25rpx rgba(255, 255, 255, 1),
    0 0 35rpx rgba(255, 255, 255, 0.9),
    0 0 45rpx rgba(255, 255, 255, 0.8),
    5rpx 5rpx 10rpx rgba(0, 0, 0, 1),
    -2rpx -2rpx 4rpx rgba(255, 255, 255, 0.6);
  animation: level7Shimmer 4s ease-in-out infinite;
}

.level-99:hover {
  box-shadow: 
    0 20rpx 50rpx rgba(255, 0, 0, 1),
    0 0 80rpx rgba(255, 128, 0, 0.8),
    0 0 120rpx rgba(255, 255, 0, 0.6),
    0 0 160rpx rgba(0, 255, 0, 0.4),
    inset 0 0 40rpx rgba(255, 255, 255, 0.4);
  transform: translateY(-6rpx) scale(1.1);
  text-shadow: 
    0 0 25rpx rgba(255, 255, 255, 1),
    0 0 35rpx rgba(255, 255, 255, 0.9),
    0 0 45rpx rgba(255, 255, 255, 0.8),
    5rpx 5rpx 10rpx rgba(0, 0, 0, 1),
    -2rpx -2rpx 4rpx rgba(255, 255, 255, 0.6);
  animation: level7Shimmer 4s ease-in-out infinite;
}

/* 等级系统工具类 */
.level-container {
  display: inline-block;
  position: relative;
}

.level-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120rpx;
  height: 60rpx;
  padding: 0 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.level-badge.small {
  min-width: 80rpx;
  height: 40rpx;
  font-size: 20rpx;
  padding: 0 12rpx;
}

.level-badge.large {
  min-width: 160rpx;
  height: 80rpx;
  font-size: 28rpx;
  padding: 0 30rpx;
}

/* 等级进度条 */
.level-progress {
  width: 100%;
  height: 8rpx;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4rpx;
  overflow: hidden;
  margin-top: 10rpx;
}

.level-progress-bar {
  height: 100%;
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.level-progress-bar.level-0 { background: #28a745; }
.level-progress-bar.level-1 { background: #ffc107; }
.level-progress-bar.level-2 { background: #17a2b8; }
.level-progress-bar.level-3 { background: linear-gradient(90deg, #17a2b8, #dc3545); }
.level-progress-bar.level-4 { background: linear-gradient(90deg, #dc3545, #6f42c1); }
.level-progress-bar.level-5 { background: linear-gradient(90deg, #6f42c1, #ffd700); }
.level-progress-bar.level-6 { background: linear-gradient(90deg, #000000, #ffd700, #6f42c1); }
.level-progress-bar.level-7 { 
  background: linear-gradient(90deg, 
    #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080
  );
  background-size: 200% 100%;
  animation: level7ProgressShimmer 3s ease-in-out infinite;
}

.level-progress-bar.level-99 { 
  background: linear-gradient(90deg, 
    #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080
  );
  background-size: 200% 100%;
  animation: level7ProgressShimmer 3s ease-in-out infinite;
}

/* 等级信息提示 */
.level-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10rpx 15rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  margin-bottom: 10rpx;
}

.level-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6rpx solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}

.level-container:hover .level-tooltip {
  opacity: 1;
  visibility: visible;
}

/* 等级升级动画 */
@keyframes levelUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.level-up-animation {
  animation: levelUp 0.6s ease-in-out;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .user-level {
    font-size: 22rpx;
    padding: 6rpx 16rpx;
  }
  
  .level-badge {
    min-width: 100rpx;
    height: 50rpx;
    font-size: 22rpx;
  }
  
  .level-badge.small {
    min-width: 70rpx;
    height: 35rpx;
    font-size: 18rpx;
  }
  
  .level-badge.large {
    min-width: 140rpx;
    height: 70rpx;
    font-size: 26rpx;
  }
  
  .level-7 {
    font-size: 26rpx;
    border-width: 3rpx;
  }
  
  .level-7:hover {
    transform: translateY(-4rpx) scale(1.05);
  }
  
  .level-99 {
    font-size: 26rpx;
    border-width: 3rpx;
  }
  
  .level-99:hover {
    transform: translateY(-4rpx) scale(1.05);
  }
}
